<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>


</head>

<body>
    <div id="app">
        <form>
            ID：{{good.id}}<br>
            名称：<input type="text" v-model="good.name"><br>
            价格：<input type="text" v-model="good.price"><br>
            图片：<img :src="good.img" alt="">
            <button @click.prevent="update">确认修改</button>
        </form>
    </div>


    <script>
        const { createApp } = Vue
        createApp({
            data() {
                return {
                    message: "Hello Vue",
                    good: {
                        id: 0,
                        name: "",
                        price: "",
                        img: ""
                    }
                }
            },
            methods: {
                update(){
                    axios.patch('http://127.0.0.1:8888/goods/'+this.good.id,this.good)
                    .then(response=>{
                        window.location.href = "index.html"
                    })
                },
                getUrlParams(key) {
                    let reg = new RegExp("(^|&)" + key + "=([^&]*)(&|$)");
                    let r = window.location.search.substr(1)
                        .match(reg);
                    if (r != null)
                        return unescape(r[2]);
                    return null;
                }
            },
            mounted() {
                let id = this.getUrlParams("id")//获取当前要修改的商品的id
                
                axios.get('http://127.0.0.1:8888/goods/'+id)
                .then(response=>{
                    this.good = response.data
                })
                
            },
        }).mount("#app")
    </script>
</body>

</html>